<template>
	<view>
		<view class="header">
			<view class="tips" @click="handleJump">提示</view>
		</view>
		<template v-if="type === 'express'">
			<view class="freight" v-if="data.detail_fees">
				<view class="freight-item">
					<view class="item-title">超长费</view>
					<view class="item-value">{{data.detail_fees.costprice}}</view>
				</view>
				<view class="freight-item">
					<view class="item-title">实重</view>
					<view class="item-value">{{data.detail_fees.good_weight}}</view>
				</view>
				<view class="freight-item">
					<view class="item-title">收费重</view>
					<view class="item-value">{{data.detail_fees.charge_all}}</view>
				</view>
				<view class="freight-item">
					<view class="item-title">运费</view>
					<view class="item-value">{{data.detail_fees.sumprice}}</view>
				</view>
				<view class="freight-item">
					<view class="item-title">派件费</view>
					<view class="item-value">{{data.detail_fees.sendweight}}</view>
				</view>
				<view class="freight-item">
					<view class="item-title">运费合计</view>
					<view class="item-value">{{data.detail_fees.dispatch_fee}}</view>
				</view>
			</view>
		</template>

		<template v-else>
			<view class="freight" v-if="data.detail_fees">
				<view class="freight-item">
					<view class="item-title">总重量</view>
					<view class="item-value">{{data.detail_fees.sumprice}}</view>
				</view>
				<view class="freight-item">
					<view class="item-title">总体积</view>
					<view class="item-value">{{data.detail_fees.volume_air_all}}</view>
				</view>
				<view class="freight-item">
					<view class="item-title">总收取费用</view>
					<view class="item-value">{{data.detail_fees.dispatch_fee}}</view>
				</view>
			</view>
		</template>

		<view class="content" >
			<template v-if="type === 'express'">
				<view v-if="data.detail_fees">
					<view class="list-item" v-for="(item,index) in data.detail_fees.list">    
						<view class="item title">{{item.logistics_number}}</view>
						<view class="item">货物类型：{{item.good_quantity}}</view>
						<view class="item">尺寸：{{item.size}}</view>
						<view class="item">品名:{{item.good_type}}</view>
						<view class="item">实重：{{item.good_weight}}</view>
						<view class="item">体积重：{{item.volume_air_all}}</view>
						<view class="item red">收费重：{{item.charge_all}}</view>
						<view class="item">单价：{{item.weight_price}}</view>
						<view class="item">超长费：{{item.costprice}}</view>
						<view class="item red">收取费用：{{item.sumprice}}</view>
					</view>
				</view>
			</template>

			<template v-else>
				<view v-if="data.detail_fees">
					<view class="list-item" v-for="(item,index) in data.detail_fees.list" :key="item.logistics_number">
						<view class="item title">{{item.logistics_number}}</view>
						<view class="item">货物类型：{{item.good_quantity}}</view>
						<view class="item">品名：{{item.good_type}}</view>
						<view class="item">重量：{{item.good_weight}}</view>
						<view class="item">尺寸：{{item.size}}</view>
						<view class="item">材积：{{item.volume_air_all}}</view>
						<view class="item">收费单价：{{item.price}}</view>
						<view class="item">收取费用：{{item.sumprice}}</view>
						<view class="item red ">材积/重量收取类别：{{item.typerow}}</view>
					</view>
				</view>
			</template>
		</view>
	</view>
</template>

<script>
    import {urgentDetails,appointmentDetail} from '@/api/order.js';
	export default{
		data(){
			return{
				param:{},
				data:{}
			}
		},
		async onLoad(options) {
            this.logistics_id = options.logistics_id ||' '
            this.type = options.type || ''
			await this.getOrderDetail()
		},
		methods:{
            async getOrderDetail(){
                try{
					let requestType = this.type === 'express' ? urgentDetails : appointmentDetail
					let param = {};
					if(this.type === 'express'){
						param.logistics_id = this.logistics_id || ''
					}else{
						param.recorded_id = this.logistics_id || ''
					}
					await requestType(param).then(res=>{
                        this.data = res.data
                    })
				}catch(e){}
            },

			handleJump(){
				const formula_id = this.data.detail_fees.formula_id || ''
				uni.navigateTo({
					url:`/pages/order/tips-detail?formula_id=${formula_id}`
				})
			},
		}
	}
</script>

<style lang="scss">
	.header{
		padding: 15px;
		width: 100%;
		box-sizing: border-box;
		.tips{
			width: 100%;
			height: 56rpx;
			background-color: #000;
			font-size: 28rpx;
			color: #fff;
			border-radius: 14rpx;
			text-align: center;
			line-height: 56rpx;
		}
	}
	.freight{
		padding: 15px;
		width: 100%;
		box-sizing: border-box;
		display: grid;
		grid-template-columns: repeat(4, 1fr);
		grid-gap: 8px;
		.item-title{
			font-size: 24rpx;
			font-weight: 500;
			color: #E82E2E;
			text-align: center;
		}
		.item-value{
			height: 64rpx;
			text-align: center;
			line-height: 64rpx;
			border-radius: 14rpx;
			border: 2rpx solid #E6E6E6;
		}
	}
	
	.content{
		padding: 0 30rpx;
		.list-item{
			min-height: 200rpx;
			padding: 20rpx;
			border-radius: 14rpx;
			border: 2rpx solid #E6E6E6;
			box-sizing: border-box;
			display: grid;
			grid-template-columns: repeat(3, 1fr);
			grid-template-areas: 'h h h';
			grid-gap: 8px;
			.item{
				font-size: 24rpx;
				font-size: 500;
				color: #333;
				overflow: hidden;
			}
			.red{
				color: #E82E2E;
			}
			.title{
				grid-area: h;
			}
		}
	}
</style>